<template>
  <el-dialog
    top="80px"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-container>
      <el-main :style="{ 'max-height': maxHeightDialog }">
        <div style="display: flex; padding: 10px 0px">
          <div style="flex: 1">
            <div style="font-size: 17px; color: #303133">设备列表</div>
            <div style="padding: 10px 20px">
              <div style="margin-bottom: 10px">
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >
              </div>
              <div style="padding-left: 10px">
                <el-checkbox-group
                  v-model="checkedDevices"
                  @change="handleCheckedDevicesChange"
                >
                  <el-checkbox
                    v-for="item in deviceList"
                    :label="item.id"
                    :key="item.id"
                    style="display: block; margin-bottom: 3px"
                    >{{ item.deviceName }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
          </div>
          <div style="flex: 1" v-if="operationType == ''">
            <div style="font-size: 17px; color: #303133">已选下发人脸数据</div>
            <div style="padding: 10px 20px">
              <div
                style="display: flex; align-items: center; margin-bottom: 5px"
                v-for="(item, index) in selectedDataList"
                :key="index"
              >
                <img
                  :src="item.facePic"
                  style="
                    width: 60px;
                    height: 60px;
                    cursor: pointer;
                    background-color: #fbfdff;
                    border: 1px dashed #c0ccda;
                  "
                  @click="handleImgPreview(item.facePic)"
                />
                <span style="margin-left: 10px">{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          :disabled="submitLoading"
          style="width: 120px; margin-right: 10px"
          @click="isVisible = false"
        >
          取消
        </el-button>
        <el-button
          size="medium"
          type="primary"
          icon="el-icon-check"
          :disabled="submitLoading"
          :loading="submitLoading"
          style="width: 120px"
          @click="toSubmit"
        >
          确定
        </el-button>
      </el-footer>
    </el-container>

    <el-dialog
      :visible.sync="imgDialogVisible"
      :title="'人脸图片'"
      top="100px"
      width="500px"
      :append-to-body="true"
    >
      <img :src="dialogImageUrl" alt="" style="padding: 20px; width: 100%" />
    </el-dialog>
  </el-dialog>
</template>

<script>
import dataFormMixins from '@/mixins/data-form-mixins'
import EpidemicPreventionManageApi from '@/api/epidemic-prevention-manage'
export default {
  name: 'PersonnelDistribution',
  mixins: [dataFormMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    selectedDataList: {
      type: Array,
      default: () => {
        return []
      },
    },
    operationType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      deviceList: [],
      imgDialogVisible: false,
      dialogImageUrl: '',

      checkAll: false,
      checkedDevices: [],
      isIndeterminate: false,
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },
  mounted() {
    this.getDeviceList()
  },
  methods: {
    toClose() {
      this.$emit('close')
    },
    handleImgPreview(url) {
      this.dialogImageUrl = url
      this.imgDialogVisible = true
    },

    getDeviceList() {
      EpidemicPreventionManageApi.getAllDevice().then((res) => {
        if (res.data.code == 200) {
          this.deviceList = res.data.data
        }
      })
    },

    handleCheckAllChange(val) {
      const deviceIdList = []
      if (val) {
        this.deviceList.forEach((ele) => {
          deviceIdList.push(ele.id)
        })
      }

      this.checkedDevices = deviceIdList
      this.isIndeterminate = false
    },
    handleCheckedDevicesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.deviceList.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.deviceList.length
    },

    toSubmit() {
      console.log('checkedDevices>>', this.checkedDevices)
      if (this.checkedDevices.length == 0) {
        this.$message({
          message: '请先选择设备！',
          type: 'warning',
          duration: 4000,
        })
        return false
      }
      const personIds = []
      if (this.operationType == '') {
        this.selectedDataList.forEach((ele) => {
          personIds.push(ele.id)
        })
      }
      const data = {
        personIds: personIds,
        deviceIds: this.checkedDevices,
      }
      this.submitLoading = true
      EpidemicPreventionManageApi.distributionPerson(data)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: '下发成功！',
              type: 'success',
            })
            this.submitLoading = false
            this.isVisible = false
            this.$emit('submit', '')
          } else {
            this.$message({
              message: '下发失败！',
              type: 'error',
            })
            this.submitLoading = false
          }
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
  },
}
</script>

<style scoped lang="scss">
@import '../../../../../styles/part-custom';
</style>
